<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/normalize/1.1.1/normalize.min.css"
      rel="stylesheet"
    />
    <title>xx项目专家评审</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div class="header">
      <div class="title">xx项目专家评审</div>
      <img src="./image/12233.png" />
    </div>
    <div class="container">
      <div class="luck">
        <div class="view">
          <div class="rankings" id="ranking"></div>
          <div class="num" id="text">点击开始抽奖</div>
          <div class="input">
            <button class="start" id="startbtn1">开始</button>
          </div>
        </div>
      </div>

      <div class="list">
        <div class="list-table">
          <div class="luck-list">专家名单</div>
          <table class="table" id="table"></table>
        </div>
      </div>
    </div>

    <script>
      var speed = 20; // 切换时间(单位：毫秒)
      var stopList = []; // 需要停止的位置
      var list = []; // 列表
      var userList = [];
      var flag = false;
      $.ajax({
        url: "./data.json",
        method: "get",
        success: function (res) {
          list = JSON.parse(res).userList;
          // stopList = JSON.parse(res).stopList;
          console.log(stopList);
          show();
        },
      });
      f1();

      var startTimer, stopTimer;
      var index = 0;
      var stopIndex = 0;
      var ranking = document.getElementById("ranking");
      var text = document.getElementById("text");
      var startBtn1 = document.getElementById("startbtn1");

      $(document).keydown(function (event) {
        if (event.keyCode == 112) {
          if (event.preventDefault) {
            event.preventDefault();
          } else {
            window.event.returnValue == false;
          }

          f1();
        } else if (event.keyCode == 113) {
          if (event.preventDefault) {
            event.preventDefault();
          } else {
            window.event.returnValue == false;
          }
          f2();
        }
      });

      EventListen = {
        addEvent: function (ele, fn, str) {
          if (ele.addEventListener) {
            ele.addEventListener(str, fn);
          } else if (ele.attachEvent) {
            ele.attachEvent("on" + str, fn);
          } else {
            ele["on" + str] = fn;
          }
        },
      };

      function couter() {
        if (index < list.length - 1) {
          text.innerText = list[index];
          index++;
        } else {
          index = 0;
        }
      }

      function stopCount() {
        if (index < list.length - 1) {
          index++;
        } else {
          index = 0;
        }
        text.innerText = list[index];

        if (list[index] == stopList[stopIndex]) {
          if (stopIndex < 3) {
            stopIndex++;
          }
          clearInterval(stopTimer);
        }
      }

      function f1() {
        $.ajax({
          url: "./data.json",
          method: "get",
          success: function (res) {
            stopList = JSON.parse(res).stopList;
            // console.log(stopList);
            flag = true;
          },
        });
        // console.log("伪随机");
      }

      function f2() {
        stopList = [];
        // console.log("真随机");
        for (let i = 0; i < 2; i++) {
          stopList.push(list[Math.floor(Math.random() * list.length)]);
        }
      }

      function start() {
        if (stopIndex == 0) {
          ranking.innerText = "第一次";
        } else if (stopIndex == 1) {
          ranking.innerText = "第二次";
        } else {
          alert("抽奖完毕，请等待下次抽奖");
          return false;
        }
        startBtn1.style.display = "none";
        // stopBtn.style.display = "block";

        clearInterval(stopTimer);
        startTimer = setInterval("couter()", speed);
        setTimeout(function () {
          pause();
        }, 2000);
      }

      function pause() {
        if (stopIndex < 1) {
          startBtn1.style.display = "block";
        }
        // stopBtn.style.display = "none";
        clearInterval(startTimer);
        if (flag) stopTimer = setInterval("stopCount()", speed);
        // console.log("停止");
      }

      function show() {
        for (let i = 0; i < list.length; ) {
          let a = "<tr><td>";
          if (list[i]) {
            a += list[i] + "</td><td>";
          }
          if (list[i + 1]) {
            a += list[i + 1] + "</td><td>";
          }
          if (list[i + 2]) {
            a += list[i + 2] + "</td><td>";
          }
          if (list[i + 3]) {
            a += list[i + 3] + "</td></tr>";
          }
          $("#table").append(a);
          i += 4;
        }
      }

      EventListen.addEvent(startBtn1, start, "click");
    </script>
  </body>
</html>
